<template>
    <div>
        <div class="condition-box">
            <div v-for="(item, index) in processList" :key="index" @click="processClick(item.type,index)">
                <div class="condition-icon"
                     :class="{'condition-disabled':disable && item.type !== 'node-wrap-subFlow' && item.type !== 'node-wrap-approver'}">
                    <i class="zmicon icon" :class="item.icon"></i>
                </div>
                {{item.label}}
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        processList: [{
          icon: 'icon-zmflowTodo',
          label: '审批节点',
          type: 'node-wrap-approver'
        }, {
          icon: 'icon-zmgenerator-subFlow',
          label: '子流程',
          type: 'node-wrap-subFlow'
        }, {
          icon: 'icon-zmsitemap',
          label: '条件分支',
          type: 'branch-wrap'
        }, {
          icon: 'icon-zmlvzhou_fenzhichangsuo',
          label: '选择分支',
          type: 'branchFlow'
        }],
        min: 0,
        max: 100
      }
    },
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
      index: {
        type: [Number, String],
        default: ''
      },
    },
    computed: {
      disable() {
        if (this.index !== '') {
          if (this.list[this.index].hasOwnProperty('list')) {
            return true
          } else if (this.index + 1 < this.list.length) {
            if (this.list[this.index + 1].hasOwnProperty('list')) return true
          } else {
            return false;
          }
        } else {
          console.log('step1');
          if (this.list.length !== 0) {
            if(this.list){
              if (this.list[0].hasOwnProperty('list')) return true;
              else return false;
            }else {
              return false
            }
          }
        }
      }
    },
    methods: {

      processClick(type,index) {
        const num = this.setNum();
        if (type == 'branch-wrap') {
          if (this.disable) return false;
          this.$emit('click', {
            type,
            list: [{
              setId: new Date().valueOf() + '0',
              title: `条件LnV1c${num}`,
              suggestFlag: false
            }, {
              setId: new Date().valueOf() + '1',
              title: `条件LnV1c${num}`,
              suggestFlag: false
            }]
          });
        } else if (type == 'branchFlow') {
          if (this.disable) return false;
          this.$emit('click', {
            type,
            list: [{
              setId: new Date().valueOf() + '0',
              title: `审批节点LnV1c${num}`,
              suggestFlag: false
            }, {
              setId: new Date().valueOf() + '1',
              title: `审批节点LnV1c${num}`,
              suggestFlag: false
            }]
          });
        } else {
          this.$emit('click', {
            type,
            setId: new Date().valueOf() + index.toString(),
            title: `发起节点${num}`,
            suggestFlag: false
          });
        }
      },
      setNum() {
        return Math.floor(Math.random() * (this.max - this.min + 1)) + this.min;
      }
    }
  }
</script>

<style lang="less">
    .condition-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        padding: 10px 0;

        .condition-icon {
            width: 60px;
            height: 60px;
            line-height: 60px;
            border: 1px solid #e5e5e5;
            border-radius: 30px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 12px;
            cursor: pointer;
            margin-bottom: 4px;
            text-align: center;

            &:hover {
                background-color: #3296FA;
            }

            &:hover .icon {
                color: #FFFFFF;
            }

            .icon {
                font-size: 32px;
            }
        }

        .condition-disabled {
            background: #e5e5e5;
            color: #999;
            cursor: default;

            &:hover {
                background: #e5e5e5;
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            &:hover .icon {
                color: #999;
            }
        }
    }
</style>
